<template>
    <div class="view_checking_account">
        <card title="商家对账管理">
            <template #actions>
                <el-date-picker
                    class="w-40"
                    v-model="queryBillDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="创建时间"
                />
                <el-select class="w-28" placeholder="审核状态" v-model="queryBillReviewStatus" clearable>
                    <el-option v-for="(val, key) in billReviewStatus" :key="key" :value="key" :label="val.text" />
                </el-select>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySth" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" align="center" label="#" />
                    <el-table-column prop="shopName" label="商家名称" />
                    <el-table-column prop="checkingSn" label="对账单号" />
                    <el-table-column prop="startDate" label="起始时间" />
                    <el-table-column prop="endDate" label="截止时间" />
                    <el-table-column prop="lockKey" label="金额/元" :formatter="amountFormatter" />
                    <el-table-column label="审核状态">
                        <template #default="{ row }">
                            <el-tag effect="dark" :type="billReviewStatus[row.auditStatus].tagType">
                                {{ billReviewStatus[row.auditStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="审核员" />
                    <el-table-column prop="auditTime" label="审核时间" />
                    <el-table-column prop="confirmTime" label="确认时间" />
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" v-if="row.auditStatus === 3" @click="review(row.chkAccountId)">
                                审核
                            </el-button>
                            <el-button type="text" @click="view(row.checkingSn)">查看明细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </card>

        <!-- 明细对话框 -->
        <el-dialog :visible.sync="visible">
            <div class="desc_list -mt-4">
                <div class="desc_list-top">
                    <h1 class="desc_list-title">账单明细</h1>
                    <p class="desc_list-subtitle">对账单号：ch-8070402041236889600</p>
                </div>
                <div class="desc_list-content">
                    <el-table :data="billDetails">
                        <el-table-column type="index" label="#" align="center" width="48" />
                        <el-table-column prop="nickName" label="卖家名称" width="128" />
                        <!-- <el-table-column prop="checkingSn" label="对账单号" /> -->
                        <el-table-column prop="orderSn" label="卖家订单号" />
                        <el-table-column prop="lockKey" label="金额/元" width="128" :formatter="amountFormatter" />
                        <el-table-column label="订单类型" width="128">
                            <template #default="{ row }">
                                <el-tag :type="orderTypes[row.orderType].tagType">
                                    {{ orderTypes[row.orderType].text }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="receiveTime" label="确认收货时间" />
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { formatAmount } from '../../functions';

export default {
    data() {
        return {
            tableData: [],

            billDetails: [],
            visible: false,

            queryBy: 'sellerName',
            queryBillDate: '',
            queryBillReviewStatus: '',

            amountFormatter(row, column, cellValue) {
                return formatAmount(cellValue);
            },
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/ums/findCheckingAccount',
            paginable: true,
            params: {
                queryString: 'queryBy',
                queryBillReviewStatus: 'auditStatus',
                queryBillDate: 'createTime',
            },
        }),
    ],

    computed: {
        // 按某物查询
        queryBySth() {
            return {
                sellerName: '商家单号',
                checkingSn: '对账单号',
            };
        },

        // 占位符
        placeholder() {
            return `按${this.queryBySth[this.queryBy]}查询`;
        },

        // 账单审核状态
        billReviewStatus() {
            return {
                1: { text: '已确认', tagType: 'success' },
                2: { text: '待确认' },
                3: { text: '待审核', tagType: 'warning' },
            };
        },

        // 订单类型
        orderTypes() {
            return {
                1: { text: '销售' },
                2: { text: '退单', tagType: 'warning' },
            };
        },
    },

    watch: {
        queryBillReviewStatus: 'query',
        queryBillDate: 'query',
        queryBy() {
            if (this.queryString) {
                this.query();
            }
        },
    },

    methods: {
        // 审核
        review(chkAccountId) {
            this.$confirm('是否确定通过审核', '审核提示', {
                showClose: false,
                closeOnClickModal: false,
                type: 'success',
            })
                .then(() => {
                    this.$post('/yxl/ums/auditCheckingAccount', { chkAccountId }).then(this.query);
                })
                .catch(function () {});
        },

        // 查看详情
        view(checkingSn) {
            this.$get('/yxl/ums/findCheckingAccountItem', { checkingSn }).then(res => {
                this.billDetails = Object.freeze(res);
                this.visible = true;
            });
        },
    },
};
</script>